<html>
	<head>
		<title>Absolute Positioning</title>
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<style> 
    
    html
    {
      padding:0;
    }
    body 
    { 
      font-family: verdana, arial, sans-serif; 
      font-size: 10pt; 
      margin: 0; padding: 0; 
      width: 100%; height: 100%; 
      background-color: white; color: black; 
    }
    
	#abs1 
	{ 
    position:relative; 
		overflow:auto; 
    width:90%; 
    height:50%; 
		border:1px solid silver; 
		padding:10px;
	}
	#abs2 
  { 
      position:absolute; 
      left:20px; 
      top:20px; 
      width:150px; 
      height:auto; 
      background: yellow; 
      border: 1px solid blue; 
  }
	#abs2:hover
  {   
      background-color: yellow yellow yellow red; 
  }
  
	#abs3 
  { 
      position:absolute; 
      opacity:0.75;
      left:50px; 
      top:50px; 
      width:100px; 
      height:auto; 
      background: gold; 
      border: 1px solid green; 
  }
		</style>
	</head>
	<body>
		<div id="abs1">
			<p>abracadabra abracadabra abracadabra abracadabra abracadabra abracadabra</p>
			<p>abracadabra abracadabra abracadabra abracadabra abracadabra abracadabra</p>
			<p>abracadabra abracadabra abracadabra abracadabra abracadabra abracadabra</p>
			<p>abracadabra abracadabra abracadabra abracadabra abracadabra abracadabra</p>
			<p>abracadabra abracadabra abracadabra abracadabra abracadabra abracadabra</p>
			<p>abracadabra abracadabra abracadabra abracadabra abracadabra abracadabra</p>
			<p>abracadabra abracadabra abracadabra abracadabra abracadabra abracadabra</p>
			<p id="abs2">postion:absolute left:20px top:20px<br>
				This <a href="#">block</a> shall scroll with other content of the div</p> 
		</div>
		<p id="abs3">postion:absolute left:50px top:50px<br>This shall stay in <a href="#">place</a></p>
    
	</body>
</html>
